<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="css/base.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/index2.css"/>
    <style type="text/css">


    </style>
</head>
<body>
<div class="wrapper" style="color: white">
    <div class="headers">
        <div class="header-logo">
            <img src="img/LOGO.png"/>
        </div>

        <div class="header-title">
            <div>
                <div class="title-chinese">电 池 生 产 制 造 看 板</div>
                <div class="title-english">Production and Manufacturing Platfrom-PV</div>
            </div>
        </div>

        <div class="header-date">
            <dl>
                <dd class="date" id="time"></dd>
            </dl>
        </div>
    </div>
    <div>
        <div style="width: 24vw;height: 11vw;margin: auto;padding: auto">
            <div class="container_title" style="padding-top:2%">设备稼动率/Equipment Crop Rate</div>
            <div id="oee" style="height: 100%;width: 100%;padding-top:10%;"></div>
        </div>
    </div>
    <div>
        <div style="width: 50vw;height: 11vw;margin: auto;padding: auto">
            <div class="container_title" style="padding-top:1%">仪表盘/Instrument board</div>
            <div class="item_char">
                <div class="instrument" id="gauge1">
                </div>
                <div class="instrument" id="gauge2">
                </div>
                <div class="instrument" id="gauge3">
                </div>
                <div style="width: 25%;height: 11vw;" id="gauge4">
                </div>
            </div>
        </div>

    </div>
    <div>
        <div class="container_title" style="padding-top:2%">减少碳排量/Reduction of carbon emissions</div>
        <ul>
            <li>

                <img src="img/battery/小树ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
            <li>

                <img src="img/battery/煤矿ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
            <li>

                <img src="img/battery/二氧化碳ICON.png" class="item_img">

                <div class="item_carbon">等效种植树木{{reduceCarbon}}棵</div>
            </li>
        </ul>
    </div>
    <div>
        <div class="container_title">
            质量控制/Quality control(QC)
        </div>
        <div id="qc" style="height: 80%;width: 100%;padding-left: 10%"></div>
    </div>
    <div>
        <div class="container_title">
            当日产量/Today's production
        </div>
        <div id="production" style="height: 80%;width: 97%"></div>
    </div>
    <div>
        <div class="container_title">预警信息/Early warning information</div>
        <div>
            <table style="color: #ce4041;text-align: center;width: 100%">
                <thead>
                <tr>
                    <th>时间段</th>
                    <th>工序</th>
                    <th>预警信息</th>
                </tr>
                </thead>
                <tbody v-for="item in warningInfo">
                <tr>
                    <td>{{item.period}}</td>
                    <td>{{item.step}}</td>
                    <td>{{item.info}}</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
    <div>
        <div style="width: 49.365vw;height: 14.844vw;margin: auto;padding: auto">
            <div class="container_title">
                CPK
            </div>
            <div class="cpk">
                <div id="cpk" style="height: 100%;width: 100%"></div>
                <div>数据<br/>统计</div>
                <div>
                    <table class="board" style="border-spacing:0px;border-collapse: separate;">
                        <thead>
                        <tr style="color:#08feff ">
                            <th>数据个数</th>
                            <th>最大值</th>
                            <th>最小值</th>
                            <th>平局值</th>
                            <th>标准偏差</th>
                            <th>CPK</th>
                            <th>基本点</th>
                            <th>直方图柱数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>7920</td>
                            <td>0.2</td>
                            <td>-0.198</td>
                            <td>0.034</td>
                            <td>0.0424201</td>
                            <td>1.30441</td>
                            <td>OFP1001100</td>
                            <td>21</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="container_title">
            电池片效率/ETA
        </div>
        <div id="eta" style="height: 80%;width: 100%"></div>
    </div>
</div>

</body>
</html>
<script src="js/node_modules/jquery/dist/jquery.js"></script>
<script src="js/node_modules/vue/dist/vue.js"></script>
<script src="js/node_modules/echarts/dist/echarts.js"></script>
<script src="js/base.js"></script>
<script src="js/app.js"></script>